<!--
   Copyright 2024 The Google Research Authors.
  
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<!DOCTYPE html>
<html>
<head>
<title>Click Dialog Click Widget Task</title>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="../core/core.css">
<link rel="stylesheet" type="text/css" href="../core/jquery-ui/jquery-ui.min.css">
<style>
  #area { height: 100px; display: block; }
  #area .widget { margin: 5px 0;}
  #area textarea { height: 20px; }
  #area input[type=input] { width: 120px !important; }
  #dialog { height: auto !important; }
  .ui-dialog { font-size: 10px; }
  .ui-dialog .ui-dialog-titlebar { padding: 2px 3px; height: 15px; }
  .ui-button { outline: 0; }
</style>

<!-- JS -->
<script src="../core/core.js"></script>
<script src="../core/d3.v3.min.js"></script>
<script src="../core/jquery-ui/external/jquery/jquery.js"></script>
<script src="../core/jquery-ui/jquery-ui.min.js"></script>
<script src="../common/ui_utils.js"></script>

<script>
core.EPISODE_MAX_TIME = 2000000;  // 2000 seconds

// click-widget
var ELEMENT_NAMES = ['radio', 'checkbox', 'text', 'textarea', 'button'];
var ELEMENT_HTML = {
  'radio': {'start': '<div class="widget"><label><input type="radio" data-type="radio" name="radio">',
    'end': '</label></div>'},
  'checkbox': {'start':' <div class="widget"><label><input type="checkbox" data-type="checkbox">',
    'end':'</label></div>'},
  'text': {'start': '<div class="widget"><input type="input" data-type="text" value="',
    'end':'"></div>'},
  'textarea': {'start':'<div class="widget"><textarea data-type="textarea">',
    'end':'</textarea></div>'},
  'button': {'start': '<div class="widget"><button data-type="button">',
    'end':'</button></div>'}
};
var NUM_ELEMENTS = 5;

var createWidgets = function(){
  // generate query text in the UI
  var elements = [];
  var elements_html = [];
  for(var i=0;i<NUM_ELEMENTS;i++){
    randIndex = core.randi(0,ELEMENT_NAMES.length);
    var elemName = ELEMENT_NAMES[randIndex];
    var randomText = ui_utils.generateString(1,6);
    elements_html.push(ELEMENT_HTML[elemName]['start'] + randomText + ELEMENT_HTML[elemName]['end']);
    elements.push(elemName);
  }

  return [elements, elements_html.join(' ')];
}

// click-dialog-2
var BUTTONS = ['Cancel', 'OK', 'x'];

var resetUI = function(div){
  if(div.html().length > 0) $('#dialog').dialog('destroy');
  div.empty(); // clear previous problem, if any
}

var genProblem = function() {
  var task_state = -1.0;
  var div = d3.select('#area');
  div.html('');  // clear previous problem, if any

  // generate the task
  // click-widget
  var elements = createWidgets();
  var chosenElement = core.sample(elements[0]);
  div.html(elements[1]);
  // click-dialog-2
  div.append('div').attr('id', 'dialog')
  var div = $('#dialog');
  resetUI(div);
  var html = '<p>' + ui_utils.generateWords(4,8) + '</p>';
  div.append(html);
  var expectedButton = core.sample(BUTTONS);

  $('#dialog').dialog({
    height: 0,
    width: 0,
    position: {my: 'center', at: 'center', of: document.getElementById('area')},
    buttons: [
      { text: 'Cancel', click: function(e) {
        task_state = e.target.innerHTML === expectedButton ? 1.0 : -1.0;
        console.log('click-dialog-2', task_state);
      } },
      { text: 'OK', click: function(e) {
        task_state = e.target.innerHTML === expectedButton ? 1.0 : -1.0;
        console.log('click-dialog-2', task_state);
      } }
    ]
  });

  $('.ui-dialog')[0].style.margin = core.randi(15,25) + 'px ' + core.randi(5,10) + 'px';
  $('.ui-dialog')[0].style.width = core.randi(115,140) + 'px';

  $('.ui-dialog-titlebar button.ui-button').on('click', function(e){
    task_state = expectedButton === 'x' ? 1.0 : -1.0;
    console.log('click-dialog-2', task_state);
  });

  $('#area .widget').on('click', function(){
    var elemType = $(this).find('input, textarea, button')[0].getAttribute('data-type');
    var widget_state = elemType === chosenElement ? 1.0 : -1.0;
    console.log('click-widget', widget_state);
    if (task_state == 1.0) {
      resetUI($('#dialog'));
      core.endEpisode(widget_state, widget_state > 0);
    } else {
      resetUI($('#dialog'));
      core.endEpisode(-1.0);
    }
  });

  d3.select('#query').html('Click the button in the dialog box labeled "' + expectedButton + '", and then click on a "' + chosenElement + '" widget.');
  // d3.select('#query').html('Click on a "' + chosenElement + '" widget, after click the button in the dialog box labeled "' + expectedButton + '".');
}

window.onload = function() {
  core.startEpisode();
}
</script>
</head>
<!-- Base HTML -->
<body>
<div id="wrap">
  <div id="query"></div>
  <div id="area">
    <div id='dialog'></div>
  </div>
</div>
</body>
</html>
